<template>
	<div class="rst-activity">
		<div class="activity-txt">
			<span :style="{ background: '#' + activities[0].icon_color }">{{ activities[0].icon_name }}</span>
			<span>{{ activities[0].description }}</span>
		</div>
		<div class="activity-count" @click="showSheet = true">
			<span>{{ activities.length }}个优惠</span>
			<i class="fa fa-caret-down"></i>
		</div>
		<!-- 优惠弹窗 -->
		<transition name="fade">
			<div class="act-model" v-show="showSheet">
				<div class="activity-sheet">
					<i @click="showSheet = false" class="fa fa-remove"></i>
					<h2>优惠活动</h2>
					<ul>
						<li v-for="(item, index) in activities" :key="index">
							<span :style="{ background: '#' + item.icon_color }">{{ item.icon_name }}</span>
							<span>{{ item.description }}</span>
						</li>
					</ul>
				</div>
			</div>
		</transition>
	</div>
</template>

<script>
export default {
	name: 'Activity',
	props: {
		activities: Array,
	},
	data() {
		return {
			showSheet: false,
		};
	},
};
</script>

<style scoped>
.rst-activity {
	display: flex;
	color: #333;
	margin: 3.2vw auto 0;
	align-items: center;
	font-size: 0.6rem;
	width: 80vw;
}
.rst-activity .activity-txt {
	flex: 1;
	overflow: hidden;
}
.activity-txt span:first-child {
	color: #fff;
	height: 4.466667vw;
	line-height: 3.466667vw;
	font-size: 0.6rem;
	padding: 0.533333vw 1.2vw;
	margin-right: 1.6vw;
	display: inline-block;
	box-sizing: border-box;
	border-radius: 0.266667vw;
}
.activity-count {
	width: 16.266667vw;
	flex-shrink: 0;
	padding-right: 2.933333vw;
	text-align: right;
	color: #999;
}
.activity-count span {
	margin-right: 1vw;
}

.act-model {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background: rgba(0, 0, 0, 0.5);
	z-index: 99;
}
.activity-sheet {
	position: absolute;
	background-color: #f5f5f5;
	box-shadow: 0 -1px 5px 0 rgba(0, 0, 0, 0.4);
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: 5.333333vw 6.933333vw;
	box-sizing: border-box;
}
.activity-sheet h2 {
	text-align: center;
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: 4.133333vw;
}
.activity-sheet ul {
	height: 50.8vw;
	overflow-y: scroll;
}
.activity-sheet ul li {
	margin-bottom: 3.066667vw;
	display: flex;
	font-size: 0.82rem;
	align-items: center;
}
.activity-sheet ul li span:first-child {
	height: 4.266667vw;
	padding: 0.533333vw 1.6vw;
	margin-right: 1.6vw;
	display: inline-block;
	box-sizing: border-box;
	border-radius: 0.266667vw;
	color: #fff;
	white-space: nowrap;
}
.activity-sheet ul li span:last-child {
	line-height: 1.38;
	flex: 1;
}
.act-model .fa-remove {
	position: absolute;
	font-size: 1.4rem;
	right: 2.666667vw;
	top: 2.666667vw;
	z-index: 1002;
	color: #888;
}
.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.25s ease-out;
}

.fade-enter,
.fade-leave-to {
	opacity: 0;
}
</style>
